<template>
    <!-- 主卡设置附属卡额度 -->
    <div class="consumptionBysecret" v-loading="isLoading">
        <cardComponent pageTitle="申请处理类-->主卡设置附属卡设置">
            <template slot="cardBody">
                <div class="dialogVisible">
                    <el-form
                        :model="searchFormOne"
                        size="small"
                        label-width="40%"
                        :rules="formRule"
                        ref="formRule"
                    >
                        <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                            <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                        </el-form-item>
                        <el-form-item label="卡号:" label-position="left" prop="CARDNO">
                            <el-input disabled v-model="searchFormOne.CARDNO"></el-input>
                        </el-form-item>

                        <el-form-item label="附属卡额度设置方式:" label-position="left" prop="settingStatus">
                            <el-select
                                placeholder="请选择"
                                v-model="searchFormOne.settingStatus"
                                clearable
                            >
                                <el-option
                                    v-for="item in settingSelect"
                                    :key="item.code"
                                    :label="item.label"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            label="附属卡额度百分比:"
                            label-position="left"
                            prop="PercentQuota"
                            v-if="searchFormOne.settingStatus === '1'"
                        >
                            <el-input v-model="searchFormOne.PercentQuota"></el-input>
                        </el-form-item>

                        <el-form-item
                            label="附属卡固定额度:"
                            label-position="left"
                            prop="fixedQuota"
                            v-if="searchFormOne.settingStatus === '2'"
                        >
                            <el-input v-model="searchFormOne.fixedQuota"></el-input>
                        </el-form-item>
                        <!-- 话术 -->
                        <div class="hstable_wrap" v-if="speechList.length!=0">
                            <el-table
                                :data="speechList"
                                border
                                stripe
                                header-row-class-name="headerRow"
                                ref="showListTable"
                                class="heard-bg business_table hstable"
                                @selection-change="handleSelectionChange"
                            >
                                <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                                <el-table-column label="业务话术">
                                    <template slot-scope="scope">{{scope.row.content}}</template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="btnBox">
                            <el-button type="primary" size="small" @click="hanleSure('formRule')">调整</el-button>
                            <el-button type="primary" size="small" @click="handleClose">返回</el-button>
                        </div>
                    </el-form>

                    <el-dialog
                        v-drag
                        title="调整附属卡提示信息"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.searchFormOne.CARDNO}}</span>
                        </p>
                        <p>
                            额度设置方式：
                            <span>{{this.searchFormOne.settingStatus|getLimitType(settingSelect)}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3a8ee6; ">您确认要调整吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="handleUpdata"
                                icon="el-icon-circle-check"
                                v-preventReClick
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import {
    closePage, reolaceString, getAccountTypeName, getDictSelectList,
} from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

import PageTitle from '@/components/pageTitle/PageTitle.vue';
import { setNumber } from '@/utils/Object';
import { RegConfig } from '@/utils/RegConfig';

export default {
    name: 'setAdditionalCard',
    components: {
        cardComponent,
    },
    data() {
        const PercentQuotaValid = (rule, value, callback) => {
            if (value > 100) {
                callback(new Error('请输入正确百分比额度'));
            } else {
                callback();
            }
        };
        return {
            searchFormOne: {
                CARDNO: '',
                settingStatus: '',
                PercentQuota: '',
                fixedQuota: '',
            },
            isLoading: false,
            accountType: '',
            // 设置方式下拉
            settingSelect: [],
            formRule: {
                CARDNO: [
                    { pattern: RegConfig.cardNo, message: '银行卡号应由13-21位数字组成', trigger: 'blur' },
                ],
                settingStatus: [
                    { required: true, message: '请选择附属卡额度设置方式', trigger: 'blur' },
                ],
                PercentQuota: [
                    { required: true, message: '请填写附属卡额度百分比', trigger: 'blur' },
                    { pattern: /^[0-9]+$/, message: '请输入数字', trigger: 'blur' },
                    { validator: PercentQuotaValid, trigger: 'blur' },
                ],
                fixedQuota: [
                    { required: true, message: '请填写附属卡固定额度', trigger: 'blur' },
                    { pattern: RegConfig.integerAmount, message: '请输入整数，首位不可为0', trigger: 'blur' },
                ],
            },
            centerDialogVisible: false,
            speechList: [],//话术列表
            selectedList: [],
        };
    },
    filters: {
        getLimitType: (value, settingSelect) => {
            value = (`${value}`).trim();

            for (let index = 0; index < settingSelect.length; index++) {
                const element = settingSelect[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
    },
    async created() {
        //    this.getBaseData({ dictValue: 'LMTOPT'}, 'settingSelect')
        this.settingSelect = await getDictSelectList('LMTOPT', this);
        const newSelect = this.settingSelect.filter(item => item.code != '9');
        this.settingSelect = newSelect;
        console.log(this.settingSelect);
    },
    async mounted() {
        this.getCardInfo();
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
        await this.getspeechList();
    },
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardList_3601: state => state.common.cardList_3601,
        defaultParams: state => state.common.defaultParams,
        defaultpinFlag: state => state.common.pinFlag,
        isCurrentMenuInfo: state => state.menu.isCurrentMenuInfo,
    }),
    // activated() {
    //     // this.getCardInfo();
    //     this.searchFormOne.settingStatus = '';
    //     this.searchFormOne.PercentQuota = '';
    //     this.searchFormOne.fixedQuota = '';
    // },
    methods: {
        // 点击关闭 处理事件
        handleClose() {

            this.$router.go(-1);
            closePage(this.$route, this, 1);
        },
        getCardInfo() {

            // console.log(this.$route.params)
            this.searchFormOne.CARDNO = this.$route.params.cardNo;
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    } else {
                        const ErrorMessage = `错误码：${res.data.status} ` + `错误信息：${res.data.msg}`;
                        this.$alert(ErrorMessage, '请求异常:', {
                            customClass: 'error', type: 'error',
                        });
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // 点击按钮进行是否
        hanleSure(formRule) {
            this.$refs[formRule].validate((valid) => {
                if (valid) {

                    console.log("this.selectedList.length", this.selectedList.length);
                    if (this.selectedList.length != this.speechList.length) {
                        this.$alert('话术尚未全部勾选！', '提示', {
                            customClass: 'warning', type: 'warning',
                        });
                        return;
                    }
                    this.centerDialogVisible = true;
                } else {
                    return false;
                }
            });
        },
        handleUpdata() {
            this.centerDialogVisible = false;
            this.isLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: '0', // 是否检查密码标志
                PIN: '', // 密码
                CARDNBR2: this.searchFormOne.CARDNO, // 调整卡片卡号
                LMTOPT: this.searchFormOne.settingStatus, // 卡片限额或附卡额度设置方式 0：与主卡共享额度 1：设置附属卡额度百分比 2：设置附属卡固定额度
                CREDPCNT: this.searchFormOne.PercentQuota, // 卡片限额或附卡额度百分比
                CREDLMT: this.searchFormOne.fixedQuota, // 卡片固定限额或附卡固定额度
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4013';
            defaultParams.body.appBody = appBody;
            // 4013交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.isLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    // console.log(result)
                    if (result.sysHead.rspCd === '000000') {
                        const { CREDLIM } = result.body.appBody;
                        this.$alert(
                            `交易成功`, '提示',
                            {
                                confirmButtonText: '确定', callback: action => {
                                    let flag = 'success';
                                    this.handleClose();
                                    this.$router.push({ path: '/operationDeals/primaryCardAddOn', params: { flag } });

                                }, customClass: 'success'
                            },
                        );

                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', { customClass: 'warning', type: 'warning' });
                    }
                } else {
                    this.$alert(
                        '请求失败!',
                        '提示',
                        {
                            customClass: 'error', type: 'error',
                        },
                    );
                }
            });
        },
    },
};
</script>

<style lang='scss'>
.consumptionBysecret {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;

    /* //头部内容 */
    .tab-header {
        width: 100%;
        text-align: left;
        span {
            font-size: 14px;
        }
        .headerTitle {
            font-size: 16px;
            margin: 10px 0px;
            color: skyblue;
        }
    }
    .dialogVisible {
        margin: 30px auto 0;
        .el-form-item__content {
            text-align: left;
        }
    }
    .btnBox {
        width: 17%;
        margin: 30px auto 0;
    }
}
</style>
